<template>
	<view class="page">
		<!-- 余额 -->
		<view class="balance">
			<text class="label">可提现余额:</text>
			<text class="amount2">¥{{ balance }}</text>
		</view>

		<!-- 金额输入 -->
		<view class = "card">
			<view class="input-box">
				<text class="label">提现金额</text>
				<input v-model="amount" type="digit" placeholder="0.00" class="money-input" />
				<text class="all-btn" @click="setAll">全部提现</text>
			</view>
			
			<!-- 微信账号（只读） -->
			<view class="account">
				<text class="label">微信账号</text>
				<input :value="wechatName" disabled class="input" />
			</view>
		</view>
		

		<!-- 提交 -->
		<button class="submit" :disabled="!canSubmit" :loading="loading" @click="submit">
			提现到微信零钱
		</button>

		<!-- 说明 -->
		<view class="desc">
			<text class="tit">提现说明</text>
			<text class="item">1. 提现金额 ≥ 0.10 元，实时到账微信零钱。</text>
			<text class="item">2. 每日最多 10 笔，单笔上限 50,000 元。</text>
			<text class="item">3. 到账失败将原路退回。</text>
		</view>
		<view class="jilu" @click="toTixianList">提现记录</view>
	</view>
</template>
<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {Tixian} from '@/api/tixian.js'
	// import { fetchBalance, createWithdraw } from '@/api/withdraw.js'

	const balance = ref(0) // 可提现余额
	const amount = ref('') // 输入金额
	const loading = ref(false) // 提交锁
	const wechatName = ref('') // 微信昵称（授权后回填）

	// 计算能否提交
	const canSubmit = computed(() =>
		Number(amount.value) > 0 &&
		Number(amount.value) <= balance.value
	)
	const toTixianList=()=>{
		uni.navigateTo({
			url:'/pages/tixian/tixianList/tixianList'
		})
	}

	// 全部提现
	function setAll() {
		amount.value = String(balance.value)
	}

	// 提交
	async function submit() {
		const val = Number(amount.value)
		if (!val || val < 0.1) return uni.showToast({
			title: '金额≥0.10元',
			icon: 'none'
		})
		if (val > balance.value) return uni.showToast({
			title: '金额不能大于余额',
			icon: 'none'
		})

		loading.value = true
		try {
			// await createWithdraw({
			//   amount: val,
			//   accountType: 'wechat',
			//   wechatOpenid: wx.getStorageSync('merchantOpenid'), // 提前授权拿到
			// })
			uni.showToast({
				title: '提现申请已提交',
				icon: 'success'
			})
			amount.value = ''
			// await loadBalance() // 重新拉余额
		} catch (e) {
			uni.showToast({
				title: e.message || '提现失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	// 拉余额 + 授权微信
	// async function loadBalance() {
	//   const res = await fetchBalance({ shopId: 1 })
	//   balance.value = res.data.availableAmount || 0

	//   // 只需一次授权
	//   if (!wx.getStorageSync('merchantOpenid')) {
	//     const { code } = await wx.login()
	//     const openidRes = await getOpenid({ code })
	//     wx.setStorageSync('merchantOpenid', openidRes.data.openid)
	//     wechatName.value = '已授权微信'
	//   } else {
	//     wechatName.value = '已授权微信'
	//   }
	// }

	onLoad(() => {
		// loadBalance()
		Tixian({
			money:100
		})
	})
</script>
<style scoped>
/* 页面基底 */
.page {
  padding: 24rpx;
  background:#f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 通用卡片 */
.card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
}

/* 余额卡片 - 渐变突出 */
.balance {

  color: #000000;
  text-align: center;
  padding: 40rpx;
}
.balance .label {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 8rpx;
}
.balance .amount {
  font-size: 64rpx;
  font-weight: 600;
  letter-spacing: 1rpx;
}
.amount2{
	font-size: 50rpx;
	font-weight: 500;
	letter-spacing: 1rpx;
	margin-left: 20rpx;
}

/* 输入区域 */
.input-box {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 100rpx;
}
.money-input {
  flex: 1;
  border: 2rpx solid #e4e7ed;
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
  font-size: 36rpx;
  color: #303133;
  background: #f5f7fa;
  transition: border-color 0.2s;
}
.money-input:focus {
  border-color: #ff6034;
}
.all-btn {
  margin-left: 16rpx;
  color: #ff6034;
  font-size: 28rpx;
  font-weight: 500;
  padding: 16rpx 24rpx;
  border-radius: 24rpx;
  background: #fff;
  transition: all 0.2s;
}
.all-btn:active {
  background: #ff6034;
  color: #fff;
}

/* 到账方式 */
.way {
  display: flex;
  align-items: center;
  gap: 24rpx;
}
.way label {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #606266;
  gap: 8rpx;
}
.account .input {
  width: 100%;
/*  border: 2rpx solid #e4e7ed;
  border-radius: 16rpx; */
  padding: 24rpx 20rpx;
  font-size: 30rpx;
  color: #303133;
/*  background: #f5f7fa; */
}

/* 提交按钮 - 渐变 + 阴影 */
.submit {
  margin: 40rpx 24rpx;
  background-color:  #ee0a24 ;
  border-radius: 50rpx;
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: 500;
  transition: all 0.2s;
}
.submit:active {
  transform: translateY(2rpx);
  box-shadow: 0 6rpx 12rpx rgba(238, 10, 36, 0.2);
}
.submit:disabled {
  background: #c0c4cc;
  box-shadow: none;
  transform: none;
}

/* 说明卡片 */
.desc {
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
}
.desc .tit {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16rpx;
}
.desc .item {
  display: block;
  font-size: 28rpx;
  color: #606266;
  line-height: 1.8;
  margin-bottom: 8rpx;
}
.jilu{
	display:flex;
	color:blue;
}
</style>